import { ref, nextTick } from 'vue'
import { listByIds } from '~/api/oss'
import defaultGoodsImg from '~/assets/goods-default.png'

// 全局图片URL缓存
const imageUrlCache = ref({})
// 正在请求中的ossId集合，避免重复请求
const requestingOssIds = new Set()

/**
 * 使用图片缓存的composable
 */
export const useImageCache = () => {
  
  /**
   * 同步版本的获取封面图片（用于已经处理过的数据）
   * @param {string} coverPic - 封面图片字符串，可能是URL或ossId
   * @returns {string} 图片URL或默认图片路径
   */
  const getCoverImage = (coverPic) => {
    if (!coverPic) return ''
    
    // 如果已经是完整URL，直接返回第一个
    if (coverPic.includes('http')) {
      return coverPic.split(',')[0]
    }
    
    // 检查是否为本地资源路径（以 ~/ 或 @/ 或 / 开头的路径）
    if (coverPic.startsWith('~/') || coverPic.startsWith('@/') || coverPic.startsWith('/assets/')) {
      return coverPic
    }
    
    // 如果是ossId，从缓存中获取
    const ossId = coverPic.split(',')[0]
    
    const cachedUrl = imageUrlCache.value?.[ossId]
    if (cachedUrl) {
      return cachedUrl
    }
    
    // 如果缓存中没有，尝试异步获取（但不阻塞渲染）
    if (ossId && !cachedUrl && !requestingOssIds.has(ossId)) {
      // 标记为正在请求中
      requestingOssIds.add(ossId)
      
      // 异步获取图片URL并更新缓存
      listByIds(ossId).then(res => {
        if (res.data && res.data.length > 0) {
          const oss = res.data[0]
          imageUrlCache.value[oss.ossId] = oss.url
          // 触发响应式更新
          nextTick(() => {
            // 可以在这里触发特定的更新逻辑
            // 例如：强制更新列表数据
          })
        }
      }).catch(error => {
        console.error('获取图片URL失败:', error)
      }).finally(() => {
        // 请求完成后移除请求状态
        requestingOssIds.delete(ossId)
      })
    }
    
    // 返回原始OSS ID，让模板中的computed属性处理显示逻辑
    // 这样当异步获取到真实URL后，视图能正确更新
    return ossId || defaultGoodsImg
  }
  
  /**
   * 异步版本的获取图片URL
   * @param {string} coverPic - 封面图片字符串
   * @returns {Promise<string>} 图片URL
   */
  const getCoverImageAsync = async (coverPic) => {
    if (!coverPic) return ''
    
    // 如果已经是完整URL，直接返回第一个
    if (coverPic.includes('http')) {
      return coverPic.split(',')[0]
    }
    
    // 如果是ossId，先检查缓存
    const ossId = coverPic.split(',')[0]
    const cachedUrl = imageUrlCache.value?.[ossId]
    if (cachedUrl) {
      return cachedUrl
    }
    
    // 从API获取
    try {
      const res = await listByIds(ossId)
      if (res.data && res.data.length > 0) {
        const oss = res.data[0]
        imageUrlCache.value[oss.ossId] = oss.url
        return oss.url
      }
    } catch (error) {
      console.error('获取图片URL失败:', error)
    }
    
    return ''
  }
  
  /**
   * 批量预加载图片URL到缓存
   * @param {Array} ossIds - OSS ID数组
   */
  const preloadImages = async (ossIds) => {
    if (!ossIds || ossIds.length === 0) return
    
    // 过滤出未缓存且未在请求中的ID
    const uncachedIds = ossIds.filter(id => 
      !imageUrlCache.value[id] && !requestingOssIds.has(id)
    )
    if (uncachedIds.length === 0) return
    
    // 标记所有ID为正在请求中
    uncachedIds.forEach(id => requestingOssIds.add(id))
    
    try {
      const res = await listByIds(uncachedIds.join(','))
      if (res.data && res.data.length > 0) {
        res.data.forEach(oss => {
          imageUrlCache.value[oss.ossId] = oss.url
        })
      }
    } catch (error) {
      console.error('批量预加载图片失败:', error)
    } finally {
      // 请求完成后移除所有请求状态
      uncachedIds.forEach(id => requestingOssIds.delete(id))
    }
  }
  
  /**
   * 清空图片缓存
   */
  const clearImageCache = () => {
    imageUrlCache.value = {}
  }
  
  /**
   * 获取缓存状态
   */
  const getCacheInfo = () => {
    return {
      cacheSize: Object.keys(imageUrlCache.value).length,
      cache: imageUrlCache.value
    }
  }
  
  return {
    getCoverImage,
    getCoverImageAsync,
    preloadImages,
    clearImageCache,
    getCacheInfo,
    imageUrlCache
  }
}